/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass";

@include global-reset;

@mixin sprite($pos : left top) {
  background:url(img/sprite.png) $pos no-repeat;
}
@mixin btn($n){
	width: 39px; height: 30px; @include sprite(-10-$n*44px 0); display: block; position: absolute; left:200+$n*50px; top:102px;
}


body{ background-color: #1e2129; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}


/* ---------------------------------------------------- */
/*		PLAYER
/* ---------------------------------------------------- */	
.player{ position: relative; width: 559px; width: 559px; margin: 40px auto; color:#999999; font-size: 14px; padding: 200px 20px 20px 20px; background: url(img/bg.png); @include border-radius(3px); border: 1px solid #000; @include single-box-shadow(rgba(255,255,255,0.1),0,1px,0,0,inset);
	@include background(linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2)),url(img/bg.png));
	.thumb{ width: 154px; height: 154px; position: absolute; top:20px; left:20px; border: 5px solid rgba(0,0,0,0.1);}
	.title{ position: absolute; top:20px; left:200px; color:#f65a49; font-weight: bold; @include single-text-shadow(rgba(0,0,0,0.5),0,1px); font-size: 18px; line-height: 23px; }
	.play{ @include btn(0);}
	.play:hover,.play.active{ background-position:-10px -34px;}
	.pause{ @include btn(1);}
	.pause:hover,.pause.active{ background-position:-54px -34px;}
	.prev{ @include btn(2);}
	.prev:hover{ background-position:-98px -34px;}
	.next{ @include btn(3);}
	.next:hover{ background-position:-142px -34px;}
	.progress{ width: 338px; height: 14px; @include sprite(-10px -93px); top:157px; left:200px; position: absolute; cursor:pointer; padding: 3px;
		span{ display: block; background-color: #e65141; width: 0px; height: 14px; @include border-radius(3px); @include sprite(left -73px);background-repeat: repeat-x;}
	}
	.time{  width: 344px; height: 20px; top:142px; left:200px; position: absolute; text-align: center; font-size: 12px;}
	.duration{ position: absolute; top:74px; left:200px; }
	.volume-container{ position: absolute; left:449px; top:111px; @include sprite(-52px -141px); padding-left: 27px; height: 20px; padding-top: 2px; }
	.volume{ width: 87px; height: 9px; @include sprite(-11px -124px); position: relative; position: relative;
		.ui-slider-handle{ display: block; width: 18px; height: 18px; @include sprite(-11px -140px);  top: -4px; position: absolute; margin-left: -9px;}
		.ui-slider-range{ display: block; height: 7px; background-color: #e65040; @include border-radius(10px); border-top: 1px solid #852e25; margin-top: 1px;}
	}
	.playlist{ background-color: #191919; padding: 5px 10px; @include border-radius(5px); border-bottom: 1px solid #49494a; border-top: 1px solid #070707;
		a{ color:#656565; text-decoration: none; display: block; height: 20px; line-height: 20px; padding: 0 3px; margin: 2px 0; } 
		a.active,a:hover{ color:#FFF;background-color: #222222;  }
		a.active{ @include border-radius(3px); @include sprite(515px -165px);background-color: #222222;  }
		img{  display: none; }
	}
}
